<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta name="format-detection" content="telephone=no">
    <meta name="csrf-param" content="_homeCSRF">
    <meta name="csrf-token" content="bzFGWF9wOFJeHH4MAChNJlpfBxJrHVoYCFpwOSxHfCErAxUSZjlQYg==">
    <title>视频中心</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../src/img/favicon.ico" rel="shortcut icon">
    <link href="/images/favicon.ico" rel="bookmark">
    <link href="../src/css/jquery.bxslider.css" rel="stylesheet">
    <link href="../src/iconfonts/iconfont.css" rel="stylesheet">
    <link href="../src/css/bootstrap.css" rel="stylesheet">
    <link href="../src/css/dookayui.css" rel="stylesheet">
    <link href="../src/css/dx.css" rel="stylesheet">
    <link href="../src/css/dy.css" rel="stylesheet">
    <!--[if lte IE9]>
    <script src="../src/js/html5shiv.js"></script>
    <![endif]-->
    <!--[if lte IE9]>
    <script src="../src/js/respond.min.js"></script>
    <![endif]-->

    <style>
        html, body {
            position: relative;
        }

        .video-centnav {
            width: 100%;
            border-bottom: 1px solid #e5e5e5;
            text-align: center;
        }

        .video-centnav a {
            display: inline-block;
            font-size: 18px;
            line-height: 56px;
            padding: 0 22px;
            /*margin-right: 27px;*/
            cursor: pointer;
            border-bottom: 1px solid #fff;
            position: relative;
            transition: normal;
        }

        .video-centnav a:hover,
        .video-centnav a.hover {
            color: #035cac;
            border-bottom: 2px solid #035cac;
            margin-bottom: -1px;
        }

        .video-center .listwrap {
            width: 100%;
        }

        .video-center .listbox {
            width: 100%;
            position: relative;
            overflow: hidden;
            padding-top: 50px;
            padding-bottom: 37px;
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 20px;
        }

        .video-center .listbox ul {
            width: 100%;
        }

        .video-center .listbox li {
            margin-bottom: 6px;
            float: left;
        }

        .video-center .listbox li a {
            display: block;
            width: 100%;
            cursor: pointer;
        }

        .video-center .listbox li .img {
            display: block;
            width: 100%;
            position: relative;
        }

        .video-center .listbox li img {
            width: 100%;
            display: block;
        }

        .video-center .listbox li .upbg {
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.35;
            filter: Alpha(opacity=35);
            z-index: 1;
        }

        .video-center .listbox li .upico {
            display: block;
            width: 48px;
            height: 48px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -24px;
            margin-top: -24px;
            z-index: 2;
        }

        .video-center .listbox li p {
            font-size: 14px;
            line-height: 20px;
            padding: 10px 0;
        }

        #listwrap .listbox ul .img-fixed {
            width: 250px;
            height: 150px;
        }

        :-webkit-full-screen {
            background-color: black;
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .videolist ul {
            width: 810px;
            padding-left: 1px;
            overflow: hidden;
        }

        .videolist .pic img {
            display: block;
        }

        #divBacking {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 10;
            opacity: 0.5;
            filter: alpha(opacity=50);
            background: black;
            display: none;
        }

        #divframe {
            position: absolute;
            left: 0px;
            top: 0px;
            display: none;
            z-index: 100;
        }
        video::-internal-media-controls-download-button {
            display:none !important;
        }
        video::-webkit-media-controls-enclosure {
            overflow:hidden !important;
        }
        video::-webkit-media-controls-panel {
            width: calc(100% + 30px) !important;
        }
    </style>
</head>
<body style="position: relative">

<div class="header"></div>

<div id="pbody" class="">
    <div class="dx-content">

        <div class="container dx-company-overview video-center">
            <div class="title mb-5 pengxin-news-title">
                <h2 class="font-20 english-title"></h2>
                <p class="font-20 article-title"></p>
            </div>
            <div class="video-centnav" style="margin-top: 30px;">
                <a href="javascript:;" class="hover" id="0">全部</a>
            </div>
            <div class="listwrap" id="listwrap" style="margin: 0;">

                <div class="listbox row">
                    <ul></ul>
                </div>
            </div>

        </div>
    </div>

    <!--视频弹窗-->
    <div id="divBacking"></div>
    <!-- iframe-->
    <div id="divframe" class="divframe-box">
        <div  class='close-btn hidden-xs' style="width: 50px; height: 50px; background: url(../src/img/fancy_close.png) no-repeat scroll 0px 0px transparent; position: absolute; z-index: 9999; top: -30px; right: -30px; cursor: pointer;"></div>
        <div class='close-btn visible-xs'  style="width: 50px; height: 50px;left: -6px;top: 15%;background: url(../src/img/fancy_close.png) no-repeat scroll 0px 0px transparent; position: absolute; z-index: 9999; cursor: pointer;"></div>
        <video class="hidden-xs" controls="controls" id="iframe" frameborder="0" scrolling="no" autoplay controlsList='nodownload' allowtransparency="true"></video>
        <video class="visible-xs" controls="controls" id="iframe-m" frameborder="0" scrolling="no" autoplay controlsList='nodownload' allowtransparency="true"></video>
    </div>


</div>
<nav class="text-center" style="margin-bottom: 5%;">
    <!-- 分页 -->

</nav>
<footer class="footer"></footer>

<script src="../src/js/jquery-1.7.1.min.js"></script>
<script src="../src/js/videoshow.js"></script>
<script>



    function showDiv(url, w, h) {
        common.setPosition("divframe", w, h);
        common.setIframe(w, h, url);
        common.showWin();
    }

    $('.close-btn').click(function () {
        $('#iframe').attr("src", "");
        $('#iframe-m').attr("src", "");
        $('#divframe').fadeOut('fast');
        $('#divBacking').fadeOut('fast');
    });


    function serilizeURL(url) {
        var rs = url.split("?")[1];
        var arr = rs.split("&");
        var json = {};
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].indexOf("=") != -1) {
                json[arr[i].split("=")[0]] = arr[i].split("=")[1];
            }
            else {
                json[arr[i]] = "undefined";
            }
        }
        return json;
    }

    //获取分类视频
    function getCategoryVideos(a, b, c) {
        var videosLists;
        var videosListsLength;

        $.ajax({
            url: "http://192.168.100.181:8080/api/video/getVideoUrl?rootColumnInfoId=" + a + "&columnInfoId=" + b + "&videoCatalogId=" + c,
            success: function (data) {
                $('#listwrap .listbox ul').empty();
                $('.text-center').empty();

                videosLists = data.data;
                videosListsLength = videosLists.length;
                $('.text-center').append(`
                    <ul class="pagination" style="margin-top: 10px;">
                        <a class="add-a-style prev" href="javascript:void(0)" selectPage="0">上一页</a>
                        <span></span>
                        <a class="add-a-style next" href="javascript:void(0)" selectPage="0">下一页</a>
                    </ul>`)

                function pagingContent(i) {
                    $('#listwrap .listbox ul').append(`
                             <li class="col-xs-12 col-md-3 col-sm-6" style="height: 18rem;overflow: hidden;">
                              <a onclick="showDiv('${videosLists[i].url}', 784,517) ;">
                                    <span class="img">
                                        <img class="img-fixed" src=${videosLists[i].coverImgUrl} alt="">
                                        <span class="upico">
                                            <img src="http://192.168.100.181:8080/huoge-edu/src/img/videoStart.png" alt="">
                                        </span>
                                    </span>
                                    <p>${videosLists[i].title}</p>
                                </a>
                            </li>
                          `);
                }

                //分页
                var Count = videosListsLength;//记录条数
                var PageSize = 12;//设置每页示数目
                var PageCount = Math.ceil(Count / PageSize);//计算总页数
                var currentPage = 1;//当前页，默认为1
                var selectPage = 1;//当前在哪一页

                //分页按钮
                for (var i = 1; i <= PageCount; i++) {
                    var pageN = '<a class="add-a-style" href="javascript:void(0)" selectPage="' + i + '">' + i + '</a>';
                    $('.text-center .pagination span').append(pageN);
                }
                //显示默认页（第一页）
                for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                    selectPage = i;
                    pagingContent(selectPage);
                    $('.text-center span a:nth-child(1)').addClass('on');

                }
                //显示选择页的内容
                $('.text-center span a').click(function () {
                    selectPage = $(this).attr('selectPage');
                    $(this).addClass('on').siblings().removeClass('on');
                    $('#listwrap .listbox ul').html('');
                    for (i = (selectPage - 1) * PageSize; i < PageSize * selectPage; i++) {
                        pagingContent(i);
                    }
                });


                $(".next").click(function () {

                    currentPage = $($('.on')[0]).attr('selectPage');
                    currentPage = parseInt(currentPage) + 1; //当前页数
                    $('.text-center span a').eq(currentPage - 1).addClass('on').siblings().removeClass('on');

                    if (currentPage <= PageCount) {
                        $('#listwrap .listbox ul').html('');
                        for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                            pagingContent(i);
                        }
                    } else {
                        return;
                    }
                });
                $(".prev").click(function () {

                    currentPage = $($('.on')[0]).attr('selectPage');
                    currentPage = parseInt(currentPage) - 1; //当前页数

                    $('.text-center span a').eq(currentPage - 1).addClass('on').siblings().removeClass('on');
                    if (currentPage > 0) {
                        $('#listwrap .listbox ul').html('');
                        for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                            pagingContent(i);
                        }
                    } else {
                        return;
                    }
                });
            }
        });

    }

    //获取所有视频
    function getAllVideos(a, b) {

        var videosLists;
        var videosListsLength;


        $.ajax({
            url: "http://192.168.100.181:8080/api/video/getVideoUrl/?" + a + "=&" + b,
            success: function (data) {
                $('#listwrap .listbox ul').empty();
                $('.text-center').empty();

                videosLists = data.data;
                videosListsLength = videosLists.length;


                $('.text-center').append(`
                    <ul class="pagination" style="margin-top: 10px;">
                        <a class="add-a-style prev" href="javascript:void(0)" selectPage="0">上一页</a>
                        <span></span>
                        <a class="add-a-style next" href="javascript:void(0)" selectPage="0">下一页</a>
                    </ul>`)

                function pagingContent(i) {
                    $('#listwrap .listbox ul').append(`
                            <li class="col-xs-12 col-md-3 col-sm-6" style="height: 18rem;overflow: hidden;">
                                <a onclick="showDiv('${videosLists[i].url}', 784,517) ;">
                                    <span class="img">
                                        <img class="img-fixed" src=${videosLists[i].coverImgUrl} alt="" style="width:100%">
                                        <span class="upico">
                                            <img src="http://192.168.100.181:8080/huoge-edu/src/img/videoStart.png" alt="">
                                        </span>
                                    </span>
                                    <p>${videosLists[i].title}</p>
                                </a>
                            </li>
                          `);
                }

                //分页
                var Count = videosListsLength;//记录条数
                var PageSize = 12;//设置每页示数目
                var PageCount = Math.ceil(Count / PageSize);//计算总页数
                var currentPage = 1;//当前页，默认为1
                var selectPage = '';//当前在哪一页

                //分页按钮
                for (var i = 1; i <= PageCount; i++) {
                    var pageN = '<a class="add-a-style" href="javascript:void(0)" selectPage="' + i + '">' + i + '</a>';
                    $('.text-center .pagination span').append(pageN);
                }
                //显示默认页（第一页）
                for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                    selectPage = i;
                    pagingContent(selectPage);
                    $('.text-center span a:nth-child(1)').addClass('on');

                }
                //显示选择页的内容
                $('.text-center span a').click(function () {
                    selectPage = $(this).attr('selectPage');
                    $(this).addClass('on').siblings().removeClass('on');
                    $('#listwrap .listbox ul').html('');
                    for (i = (selectPage - 1) * PageSize; i < PageSize * selectPage; i++) {
                        pagingContent(i);
                    }
                });

                $(".next").click(function () {

                    currentPage = $($('.on')[0]).attr('selectPage');
                    currentPage = parseInt(currentPage) + 1; //当前页数
                    $('.text-center span a').eq(currentPage - 1).addClass('on').siblings().removeClass('on');

                    if (currentPage <= PageCount) {
                        $('#listwrap .listbox ul').html('');
                        for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                            pagingContent(i);
                        }
                    } else {
                        return;
                    }
                });
                $(".prev").click(function () {

                    currentPage = $($('.on')[0]).attr('selectPage');
                    currentPage = parseInt(currentPage) - 1; //当前页数

                    $('.text-center span a').eq(currentPage - 1).addClass('on').siblings().removeClass('on');
                    if (currentPage > 0) {
                        $('#listwrap .listbox ul').html('');
                        for (i = (currentPage - 1) * PageSize; i < PageSize * currentPage; i++) {
                            pagingContent(i);
                        }
                    } else {
                        return;
                    }
                });
            }
        });
    }

    window.current_url = location.href;
    var aidSid = serilizeURL(current_url);

    $(document).on('click', '.video-centnav a', function () {

        $(this).addClass('hover').siblings().removeClass('hover');

        var thisId = $(this)[0].id;

        if (thisId == 0) {
            getAllVideos(aidSid.pid, aidSid.secondMenuId);
        } else {
            getCategoryVideos(aidSid.pid, aidSid.secondMenuId, thisId)
        }
    });
    var intervalIndex = setInterval(function () {
        if ($($('.active')[2])[0]) {
            clearInterval(intervalIndex);
            var text = $($('.active')[2])[0].innerText;
            $('.english-title').html($($('.active')[2]).data('english'));
            $('.article-title').html(text);
            document.title = text;
        }
    }, 100);
    $(document).ready(function () {


        $(".header").load("http://192.168.100.181:8080/huoge-edu/public-file/secondMenu-header.html", function () {
            $(".px-mobile .dy-nav .bread").on("click", function () {
                $(".px-mobile .main-nav").slideToggle("slow");
            });
        });
        setTimeout(function () {

            $(".footer").load("http://192.168.100.181:8080/huoge-edu/public-file/footer.html");
        }, 10);

        function getVedioTitle() {
            var vedioTitleLists;
            var vedioTitleListsLength;

            $.ajax({
                url: "http://192.168.100.181:8080/api/videoType/getType/",
                success: function (data) {

                    vedioTitleLists = data.data;
                    vedioTitleListsLength = vedioTitleLists.length;

                    for (var i = 0; i < vedioTitleListsLength; i++) {
                        $('.video-centnav').append(`
                            <a href="javascript:;" id=${vedioTitleLists[i].id}>${vedioTitleLists[i].name}</a>
                          `);
                    }

                }
            });

        }

        getAllVideos(aidSid.pid, aidSid.secondMenuId);
        getVedioTitle();

    });
</script>
</body>
</html>
